<template>
  <div class="app-container">
      <div class="flex flex-row" :style="{'height': appHeight}">
        <div class="left">
          <div class="title flex a-item">数据权限资源列表</div>
          <div class="operation flex flex-row">
            <div class="operarionMenu flex flex-row a-item j-content"><i  class="el-icon-plus icon" /> 新增</div>
            <div class="operarionMenu flex flex-row a-item j-content"><i  class="el-icon-edit icon" /> 修改</div>
            <div class="operarionMenu flex flex-row a-item j-content"><i  class="el-icon-delete icon" /> 删除</div>
          </div>
          <div style="background-color: rgb(246,246,246)" class="th tr flex flex-row">
            <div class="index"></div>
            <div class="td name">单据名称</div>
            <div class="td type">类型</div>
          </div>
          <div class="table">
            <div :style="{backgroundColor:selectVal.value === item.value?'rgb(255,228,141)':''}"
                 :class="{
                    'white':index%2,
                    'ash': (index%2 !== 1)
                 }"
                 v-for="(item,index) in dict.t_sys_order_code_model"
                 @dblclick="getTableColumnList(item)"
                 class="th tr flex flex-row">
              <div class="index">{{ index+1 }}</div>
              <div class="td name">{{ item.label }}</div>
              <div class="td type">{{ item.type }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title flex a-item">表明细字段</div>
          <div class="operation flex flex-row">
            <div class="operarionMenu flex flex-row a-item j-content"
            @click="save"
            ><i  class="el-icon-folder-checked icon" /> 保存</div>
          </div>
          <div class="tableBox">
            <table class="table">
              <tr style="background-color: rgb(246,246,246)" class="th tr flex flex-row">
                <td class="td check"><input type="checkbox" v-model="checkAll" @click="setCheckAll"></td>
                <td class="index"></td>
                <td class="td name">字段名称</td>
                <td class="td type">字段值</td>
              </tr>
              <tr :style="{backgroundColor:index%2?'rgb(250,250,250)':'rgb(242,242,242)'}"
                  class="th tr flex flex-row"
                  v-for="(item,index) in tableColumnList"
                  @click="setCheck(item)"
              >
                <td class="td check"><input type="checkbox" v-model="item.checked"></td>
                <td class="index">{{ index+1 }}</td>
                <td class="td name">{{ item.comment }}</td>
                <td class="td type">{{ item.column }}</td>
              </tr>
            </table>
          </div>
        </div>

      </div>
  </div>
</template>

<script>
import crudSysRuleTableColumn from '@/api/system/sysRuleTableColumn'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { sysRuleTableList, tableColumnList, addOrSave } from '@/api/system/sysRuleTableColumn'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '权限字段配置', url: 'api/sysRuleTableColumn', sort: 'id,desc', crudMethod: { ...crudSysRuleTableColumn }})
const defaultForm = { id: null, code: null, name: null, table: null, column: null, seq: null, status: null, remark: null, createUserId: null, createUserCode: null, createUserName: null, createTime: null, updateUserId: null, updateUserCode: null, updateUserName: null, updateTime: null }
export default {
  name: 'SysRuleTableColumn',
  dicts:['t_sys_order_code_model'],
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      resourcesList:[
        {name:'销售单',type:"数据字典"},
      ],
      permission: {
        add: ['admin', 'sysRuleTableColumn:add'],
        edit: ['admin', 'sysRuleTableColumn:edit'],
        del: ['admin', 'sysRuleTableColumn:del'],
        import: ['admin', 'sysRuleTableColumn:import'],
        export: ['admin', 'sysRuleTableColumn:export'],
        copy: ['admin', 'sysRuleTableColumn:copy'],
        upload: ['admin', 'sysRuleTableColumn:upload'],
        download: ['admin', 'sysRuleTableColumn:download'],
        enable: ['admin', 'sysRuleTableColumn:enable'],
        disable: ['admin', 'sysRuleTableColumn:disable'],
      },
      rules: {
      },
      selectVal: {},
      appHeight: '800px',
      tableColumnList:[],
      checkAll: false
    }
  },
  mounted() {
    this.appHeight = (document.querySelector('.app-main').offsetWidth) / this.crud.getRatio() / 100+ 'px'
  },
  watch: {
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    // async getRuleTableList(){
    //   const  res = await sysRuleTableList()
    // },
    async getTableColumnList(val){
      const res = await  tableColumnList({modelName: val.value})
      this.selectVal = val
      this.tableColumnList = res.content
    },
    setCheckAll(){
      if(!this.checkAll){
        this.tableColumnList.forEach(item=>{
          item.checked = true
        })
      }else {
        this.tableColumnList.forEach(item=>{
          item.checked = false
        })
      }
    },
    save(){
      const detailList = this.tableColumnList.filter(item=>item.checked).map(item=>{
        return {
          id:item.id,
          column: item.column
        }
      })
      const data ={
        code: this.selectVal.value,
        name: this.selectVal.label,
        detailList
      }
      addOrSave(data).then(res=>{
        console.log(res)
      })
    },
    setCheck(item){
      this.$set(item,'checked',!item.checked)
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  .app-container{
    padding: 0;
    height: 100vm;
    .left{
      width: 300px;
      height: 100%;
      .title{
        height: 30px;
        background-color: #02ADFF;
        font-size: 12px;
        color: #ffffff;
        padding: 5px;
        font-weight: bold;
        margin-bottom: 0;
      }
      .table{
        height: 750px;
        overflow: auto;
        padding-bottom: 150px;
      }
      .tr{
        height: 25px;
        &:hover{
          background-color: rgb(234,242,255) !important;
        }
        .name{
          width: 170px;
        }
        .type{
          width: 90px;
        }
        .index{
          padding: 3px;
          border-right: #ccc 1px dotted;
          border-bottom: #ccc 1px dotted;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 25px;
        }
        .td{
          overflow: hidden;
          padding: 3px;
          border-right: #ccc 1px dotted;
          border-bottom: #ccc 1px dotted;
          display: flex;
          align-items: center;
        }
      }
    }
    .right{
      width: 100%;
      height: 100%;
      min-width: 500px;
      .title{
        height: 30px;
        background-color: #02ADFF;
        font-size: 12px;
        color: #ffffff;
        padding: 5px;
        font-weight: bold;
      }
      .tableBox{
        .table{
          width: 100%;
        }
        height: 750px;
        overflow: auto;
        border: #ccc 1px solid;
        width: 100%;
        .tr{
          height: 25px;
          &:hover{
            background-color: rgb(234,242,255) !important;
          }
          .name{
            width: 50%;
          }
          .type{
            width: 50%;
          }
          .index{
            padding: 3px;
            border-right: #ccc 1px dotted;
            border-bottom: #ccc 1px dotted;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 25px;
          }
          .td{
            overflow: hidden;
            padding: 3px;
            border-right: #ccc 1px dotted;
            border-bottom: #ccc 1px dotted;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .operation{
    height: 30px;
    padding: 3px;
    border-bottom: rgb(203,203,203) solid 1px;
    .operarionMenu{
      width: 50px;
      height: 100%;
      cursor: pointer;
      &:hover{
        border-radius: 5px;
        border: rgb(183,210,255) solid 1px;
        background-color: rgb(243,242,255);
      }
    }
  }
  .icon{
    font-weight: bolder;
    color: #00adee;
    margin-right: 5px;
    font-size: 15px;
  }
  .ash{
    background-color: rgb(242,242,242)
  }
  .white{
    background-color: rgb(250,250,250)
  }
</style>
